<template>
  <div class="wrapper">
    <banner-com :bannerList="bannerList" :bannerImg="bannerImg"></banner-com>
    <Row :gutter="35">
      <Col span="17">
      <div class="invite">
        <div class="head">
          <div class="title">{{ $t('promote.default_tit_card') }}</div>
          <div class="num" v-if="selectedDate === 7">{{ registerDataInfo.last7DaysUserCount }}</div>
          <div class="num" v-else>{{ registerDataInfo.last30DaysUserCount }}</div>
        </div>
        <div class="data-sty">
          <div class="left">
            <div class="list-sty">
              <div class="title">{{ $t('promote.default_sub_tit_card') }}</div>
              <div class="num" v-if="selectedDate === 7">{{ registerDataInfo.dailyAverageForWeek }}</div>
              <div class="num" v-else>{{ registerDataInfo.dailyAverageForMonth }}</div>
            </div>
            <div class="list-sty">
              <div class="title">{{ $t('promote.com_last_week') }}</div>
              <div class="num-trend">
                <Icon :type="iconType" class="trend-icon" />
                {{ selectedDate === 7 ? registerDataInfo.percentageChangeForWeek :
                  registerDataInfo.percentageChangeForMonth }}%
              </div>
            </div>
          </div>
          <div class="right">
            <div class="date-toggle">
              <span class="date" v-for="item in dates" :key="item.value"
                :class="{ active: selectedDate === item.value }" @click="selectDate(item.value)">
                {{ item.label }}
              </span>
            </div>
          </div>
        </div>
        <bar-change-com class="bar-area" :data="moreDayData" :categoryData="categoryData" :barWidth="barWidth"
          :interval="interval" id="inviteId" :barRadius="barRadius"></bar-change-com>
        <!-- registerDataInfo.last7DaysUserDataList 近7天用户数据集 registerDataInfo.last30DaysUserDataList 近30天用户数据集 -->
      </div>
      </Col>
      <Col span="7">
      <div class="info">
        <div class="title">{{ $t('promote.cumulative_registered_users') }}</div>
        <div class="sub">{{ $t('promote.in_all') }}</div>
        <div class="resign-num">{{ registerDataInfo.totalUserCount }}</div>
        <div class="sub">{{ $t('promote.card_title_label') }}</div>
        <div class="resign-num">{{ registerDataInfo.last7DaysUserCount }}</div>
      </div>
      </Col>
    </Row>
    <Row :gutter="35">
      <Col span="17">
      <div class="invite">
        <div class="head">
          <div class="title">{{ $t('promote.invite_active_users') }}</div>
          <div class="num activate-num" v-if="selectedActivateDate === 7">
            {{ activateDataInfo.last7DaysUserCount }}
          </div>
          <div class="num activate-num" v-else>{{ activateDataInfo.last30DaysUserCount }}</div>
        </div>
        <div class="data-sty">
          <div class="left">
            <div class="list-sty">
              <div class="title">{{ $t('promote.default_sub_tit_card') }}</div>
              <div class="num" v-if="selectedActivateDate === 7">{{ activateDataInfo.dailyAverageForWeek }}</div>
              <div class="num" v-else>{{ activateDataInfo.dailyAverageForMonth }}</div>
            </div>
            <div class="list-sty">
              <div class="title">{{ $t('promote.com_last_week') }}</div>
              <div class="num-trend">
                <Icon :type="activeIconType" class="trend-icon" />
                {{ selectedActivateDate === 7 ? activateDataInfo.percentageChangeForWeek :
                  activateDataInfo.percentageChangeForMonth }}%
              </div>
            </div>
          </div>
          <div class="right">
            <div class="date-toggle">
              <span class="date" v-for="date in activateDates" :key="date.value"
                :class="{ active: selectedActivateDate === date.value }" @click="selectActivateDate(date.value)">
                {{ date.label }}
              </span>
            </div>
          </div>
        </div>
        <bar-change-com class="bar-area" :data="moreActiveDayData" :categoryData="categoryActiveData"
          :barWidth="barActiveWidth" :interval="activeInterval" id="activeId" :barRadius="barRadius">
        </bar-change-com>
      </div>
      </Col>
      <Col span="7">
      <div class="info">
        <div class="title">{{ $t('promote.cumulative_active_users') }}</div>
        <div class="sub">{{ $t('promote.in_all') }}</div>
        <div class="resign-num activate-num">{{ activateDataInfo.totalUserCount }}</div>
        <div class="sub">{{ $t('promote.card_title_label') }}</div>
        <div class="resign-num">{{ activateDataInfo.last7DaysUserCount }}</div>
      </div>
      </Col>
    </Row>
  </div>
</template>
<script>
import dayjs from "dayjs";
import 'dayjs/locale/en'; // 引入dayjs的英文语言包
import { getInviteUserInfo } from "@/api/invite";
import bannerCom from './components/banner-Com.vue';
import BarChangeCom from './components/bar-change-Com.vue';

export default {
  components: { bannerCom, BarChangeCom },
  data() {
    return {
      bannerList: [
        { title: this.$t('promote.inv_banner_tit1'), text: this.$t('promote.inv_banner_text1') },
        { title: this.$t('promote.inv_banner_tit2'), text: this.$t('promote.inv_banner_text2') },
        { title: this.$t('promote.inv_banner_tit3'), text: this.$t('promote.inv_banner_text3') },
      ],
      bannerImg: require('@/assets/images/promote/inv_icon.png'),
      dates: [
        { label: this.$t('promote.day_text'), value: 7 },
        { label: this.$t('promote.month_text'), value: 30 }
      ],
      selectedDate: 7,
      activateDates: [
        { label: this.$t('promote.day_text'), value: 7 },
        { label: this.$t('promote.month_text'), value: 30 }
      ],
      selectedActivateDate: 7,
      activateDataInfo: {},
      registerDataInfo: {},
      categoryData: [],//邀请用户数x轴数据
      moreDayData: [],//邀请用户数数组
      barWidth: 0,//柱宽
      interval: 0,
      moreActiveDayData: [],//激活用户数数组
      categoryActiveData: [],//激活用户数x轴数据
      barActiveWidth: 0,//柱宽
      activeInterval: 0,
      barRadius: []
    }
  },
  computed: {
    iconType() {
      return (this.registerDataInfo.percentageChangeForWeek < 0 || this.registerDataInfo.percentageChangeForMonth < 0) ? 'md-trending-down' : 'md-trending-up';
    },
    activeIconType() {
      return (this.activateDataInfo.percentageChangeForWeek < 0 || this.activateDataInfo.percentageChangeForMonth < 0) ? 'md-trending-down' : 'md-trending-up';
    }
  },
  created() {
    this.getData();
  },
  methods: {
    selectDate(value) {
      this.selectedDate = value;
      this.compRegisterShow();
    },
    selectActivateDate(value) {
      this.selectedActivateDate = value;
      this.compActiveShow();
    },
    getData() {
      getInviteUserInfo().then(res => {
        this.activateDataInfo = res.result.activateUserData;//邀请激活用户数
        this.registerDataInfo = res.result.registerUserData;//邀请注册用户数
        this.compRegisterShow();//注册柱状显示逻辑
        this.compActiveShow();//激活柱状显示逻辑
      })
    },
    compRegisterShow() {
      // 7天有值的邀请注册用户数
      if (this.selectedDate === 7) {
        this.barRadius = [4, 4, 0, 0];
        this.categoryData = [];
        this.moreDayData = [];
        this.barWidth = 28;
        this.interval = 0;
        if (this.registerDataInfo.last7DaysUserDataList !== null) {
          this.registerDataInfo.last7DaysUserDataList.forEach((item) => {
            let date = new Date(item.dateTime * 1000);
            let weekDay = date.getDay();
            let weekDayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
            let shortWeekDay = weekDayNames[weekDay].substring(0, 2);
            this.categoryData.push(shortWeekDay);
            // 根据item.num的值显示不同柱体颜色
            let color = item.num > 0 ? '#0DA0F3' : '#EBEFF4';
            let newItem = {
              value: item.num,
              itemStyle: {
                color: color
              }
            };
            this.moreDayData.push(newItem);
          });
        } else {
          // 没值的情况
          dayjs.locale('en'); // 设置dayjs为英文环境
          const today = dayjs();
          for (let i = 0; i < 7; i++) {
            const day = today.subtract(i, 'day');
            const weekDay = day.format('ddd').substring(0, 2);
            this.categoryData.push(weekDay);
          }
          // 反转数组，使得顺序是从前往后（过去到现在）
          this.categoryData.reverse();
          let dataArr = [0, 0, 0, 0, 0, 0, 0];
          dataArr.forEach((item) => {
            // 根据item.num的值显示不同柱体颜色
            let color = item > 0 ? '#0DA0F3' : '#EBEFF4';
            let newItem = {
              value: item,
              itemStyle: {
                color: color
              }
            };
            this.moreDayData.push(newItem);
          })
        }
      } else {
        this.barRadius = [2, 2, 0, 0];
        this.categoryData = [];
        this.moreDayData = [];
        this.barWidth = 10;
        this.interval = 7;
        // 30天有值的邀请注册用户数
        if (this.registerDataInfo.last30DaysUserDataList !== null) {
          this.registerDataInfo.last30DaysUserDataList.forEach((item) => {
            const day = dayjs(item.dateTime * 1000).date();
            this.categoryData.push(day);
            // 根据item.num的值显示不同柱体颜色
            let color = item.num > 0 ? '#0DA0F3' : '#EBEFF4';
            let newItem = {
              value: item.num,
              itemStyle: {
                color: color
              }
            };
            this.moreDayData.push(newItem);
          });
        } else {
          // 没值的情况
          const today = dayjs();
          for (let i = 0; i < 30; i++) {
            const day = today.subtract(i, 'day');
            const dayNumber = day.date();
            this.categoryData.push(dayNumber);
          }
          this.categoryData.reverse();//数组翻转，天数从前到后
          let dataArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
          dataArr.forEach((item) => {
            // 根据item的值显示不同柱体颜色
            let color = item > 0 ? '#0DA0F3' : '#EBEFF4';
            let newItem = {
              value: item,
              itemStyle: {
                color: color
              }
            };
            this.moreDayData.push(newItem);
          })
        }
      }
    },
    compActiveShow() {
      // 7天激活用户数
      if (this.selectedActivateDate === 7) {
        this.barRadius = [4, 4, 0, 0];
        this.categoryActiveData = [];
        this.moreActiveDayData = [];
        this.barActiveWidth = 28;
        this.activeInterval = 0;
        if (this.activateDataInfo.last7DaysUserDataList !== null) {
          this.activateDataInfo.last7DaysUserDataList.forEach((item) => {
            let date = new Date(item.dateTime * 1000);
            let weekDay = date.getDay();
            let weekDayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
            let shortWeekDay = weekDayNames[weekDay].substring(0, 2);
            this.categoryActiveData.push(shortWeekDay);
            // 根据item.num的值显示不同柱体颜色
            let color = item.num > 0 ? '#FF6490' : '#EBEFF4';
            let newItem = {
              value: item.num,
              itemStyle: {
                color: color
              }
            };
            this.moreActiveDayData.push(newItem);
          });
        } else {
          // 没值的情况
          dayjs.locale('en'); // 设置dayjs为英文环境
          const today = dayjs();
          for (let i = 0; i < 7; i++) {
            const day = today.subtract(i, 'day');
            const weekDay = day.format('ddd').substring(0, 2);
            this.categoryActiveData.push(weekDay);
          }
          // 反转数组，使得顺序是从前往后（过去到现在）
          this.categoryActiveData.reverse();
          let dataArr = [0, 0, 0, 0, 0, 0, 0];
          dataArr.forEach((item) => {
            // 根据item的值显示不同柱体颜色
            let color = item > 0 ? '#0DA0F3' : '#EBEFF4';
            let newItem = {
              value: item,
              itemStyle: {
                color: color
              }
            };
            this.moreActiveDayData.push(newItem);
          })
        }
      } else {
        this.barRadius = [2, 2, 0, 0];
        this.categoryActiveData = [];
        this.moreActiveDayData = [];
        this.barActiveWidth = 10;
        this.activeInterval = 7;
        // 30天激活用户数
        if (this.activateDataInfo.last30DaysUserDataList !== null) {
          this.activateDataInfo.last30DaysUserDataList.forEach((item) => {
            const day = dayjs(item.dateTime * 1000).date();
            this.categoryActiveData.push(day);
            // 根据item.num的值显示不同柱体颜色
            let color = item.num > 0 ? '#FF6490' : '#EBEFF4';
            let newItem = {
              value: item.num,
              itemStyle: {
                color: color
              }
            };
            this.moreActiveDayData.push(newItem);
          });
        } else {
          // 没值的情况
          const today = dayjs();
          for (let i = 0; i < 30; i++) {
            const day = today.subtract(i, 'day');
            const dayNumber = day.date();
            this.categoryActiveData.push(dayNumber);
          }
          this.categoryActiveData.reverse();//数组翻转，天数从前到后
          let dataArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
          dataArr.forEach((item) => {
            // 根据item的值显示不同柱体颜色
            let color = item > 0 ? '#FF6490' : '#EBEFF4';
            let newItem = {
              value: item,
              itemStyle: {
                color: color
              }
            };
            this.moreActiveDayData.push(newItem);
          })
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.wrapper {
  font-family: Open Sans, Open Sans;

  .invite {
    min-height: 386px;
    max-height: 386px;
    background: #FFFFFF;
    border-radius: 8px;
    border: 2px solid #E8E8E8;
    margin-top: 32px;
    padding: 32px 40px;

    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-weight: 600;
        font-size: 22px;
        color: #1E1714;
        line-height: 26px;
      }

      .num {
        font-weight: 600;
        font-size: 36px;
        color: #0DA0F3;
        line-height: 42px;
      }

      .activate-num {
        color: #FF6490;
      }
    }

    .data-sty {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 21px;
      padding-bottom: 29px;
      border-bottom: 1px solid #EBEFF4;

      .left {
        display: flex;
        align-items: center;
        gap: 58px;

        .list-sty {
          display: flex;
          flex-direction: column;

          .title {
            font-weight: 400;
            font-size: 18px;
            color: #767B93;
            line-height: 21px;
            margin-bottom: 8px;
          }

          .num {
            font-weight: 600;
            font-size: 22px;
            color: #1E1714;
            line-height: 26px;
          }

          .num-trend {
            font-weight: 500;
            font-size: 22px;
            color: #49BC19;
            line-height: 26px;
          }
        }
      }

      .right {
        .date-toggle {
          display: inline-block;
          border-radius: 42px;
          border: 1px solid #E9EAF3;
          overflow: hidden;

          .date {
            min-width: 64px;
            display: inline-block;
            padding: 3px 19px;
            cursor: pointer;
            color: #333;
            transition: background-color 0.3s ease;
          }

          .date.active {
            background-color: #E9EAF3;
            border-radius: 42px 42px 42px 42px;
          }
        }
      }
    }

    .bar-area {
      width: 100%;
      height: 160px;
    }
  }

  .info {
    min-height: 386px;
    max-height: 386px;
    background: #FFFFFF;
    border-radius: 8px;
    border: 2px solid #E8E8E8;
    margin-top: 32px;
    padding: 40px;

    .title {
      font-weight: 600;
      font-size: 22px;
      color: #1E1714;
      line-height: 26px;
    }

    .sub {
      font-weight: 400;
      font-size: 20px;
      color: #767B93;
      line-height: 23px;
      margin-top: 40px;
    }

    .resign-num {
      font-weight: 600;
      font-size: 48px;
      color: #0DA0F3;
      line-height: 56px;
      margin-top: 8px;
    }

    .activate-num {
      color: #FF6490;
    }
  }
}
</style>
